﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>拖动分页</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <style>
        body {
            border: 0px;
            margin: 0px;
            overflow: hidden;
            background-color: transparent;
        }

        .page {
            position: absolute;
            width: 700px;
            border: 1px solid #999;
            background-color: #000;
            left: 425px;
            margin-left: -350px;
            cursor: default;
            z-index: 0;
        }

        ul {
            height: 320px;
            list-style: none;
            margin: 40px 50px 0px;
            padding: 0px;
        }

        li {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            text-align: left;
            border-bottom: 1px dashed #999;
        }

        a {
            text-decoration: none;
            color: #999;
        }

            a:hover {
                font-weight: bold;
            }

        li span {
            float: right;
            color: #999;
        }

        .tip {
            display: block;
            width: 100%;
            font-size: 12px;
            color: #999;
            text-align: center;
            margin: 10px 0px 20px;
        }
    </style>
</head>
<body onselectstart="return false;">
    <script>
        function id(obj) {
            return document.getElementById(obj);
        }
        var page;
        var lm, mx;
        var md = false;
        var sh = 0;
        var en = false;
        window.onload = function () {
            page = document.getElementsByTagName("div");
            debugger;
            if (page.length > 0) {
                page[0].style.zIndex = 2;
            }
            for (i = 0; i < page.length; i++) {
                page[i].className = "page";
                page[i].id = "page" + i;
                page[i].i = i;
                page[i].onmousedown = function (e) {
                    if (!en) {
                        if (!e) { e = e || window.event; }
                        lm = this.offsetLeft;
                        mx = (e.pageX) ? e.pageX : e.x;
                        this.style.cursor = "w-resize";
                        md = true;
                        if (document.all) {
                            this.setCapture();
                        } else {
                            window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                        }
                    }
                }
                page[i].onmousemove = function (e) {
                    if (md) {
                        en = true;
                        if (!e) { e = e || window.event; }
                        var ex = (e.pageX) ? e.pageX : e.x;
                        this.style.left = ex - (mx - lm) + 350;
                        if (this.offsetLeft < 75) {
                            var cu = (this.i == 0) ? page.length - 1 : this.i - 1;
                            page[sh].style.zIndex = 0;
                            page[cu].style.zIndex = 1;
                            this.style.zIndex = 2;
                            sh = cu;
                        }
                        if (this.offsetLeft > 75) {
                            var cu = (this.i == page.length - 1) ? 0 : this.i + 1;
                            page[sh].style.zIndex = 0;
                            page[cu].style.zIndex = 1;
                            this.style.zIndex = 2;
                            sh = cu;
                        }
                    }
                }
                page[i].onmouseup = function () {
                    this.style.cursor = "default";
                    md = false;
                    if (document.all) {
                        this.releaseCapture();
                    } else {
                        window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    }
                    flyout(this);
                }
            }
        }
        function flyout(obj) {
            if (obj.offsetLeft < 75) {
                if ((obj.offsetLeft + 350 - 20) > -275) {
                    obj.style.left = obj.offsetLeft + 350 - 20;
                    window.setTimeout("flyout(id('" + obj.id + "'));", 0);
                } else {
                    obj.style.left = -275;
                    obj.style.zIndex = 0;
                    flyin(id(obj.id));
                }
            }
            if (obj.offsetLeft > 75) {
                if ((obj.offsetLeft + 350 + 20) < 1125) {
                    obj.style.left = obj.offsetLeft + 350 + 20;
                    window.setTimeout("flyout(id('" + obj.id + "'));", 0);
                } else {
                    obj.style.left = 1125;
                    obj.style.zIndex = 0;
                    flyin(id(obj.id));
                }
            }
        }
        function flyin(obj) {
            if (obj.offsetLeft < 75) {
                if ((obj.offsetLeft + 350 + 20) < 425) {
                    obj.style.left = obj.offsetLeft + 350 + 20;
                    window.setTimeout("flyin(id('" + obj.id + "'));", 0);
                } else {
                    obj.style.left = 425;
                    en = false;
                }
            }
            if (obj.offsetLeft > 75) {
                if ((obj.offsetLeft + 350 - 20) > 425) {
                    obj.style.left = obj.offsetLeft + 350 - 20;
                    window.setTimeout("flyin(id('" + obj.id + "'));", 0);
                } else {
                    obj.style.left = 425;
                    en = false;
                }
            }
        }
    </script>
    <div>
        <ul>
            <li><span>2009-4-29 02:16</span><a href=#>东方之珠</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>啊！爱人</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>宁静温泉</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>你的样子</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>恋曲1980</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>恋曲1980</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>恋曲2000</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>亚细亚的孤儿</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>童年</a></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><span>2009-4-29 02:16</span><a href=#>弹唱词</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>飞车</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>东方之珠</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>滚滚红尘</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>光阴的故事</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>之乎者也</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>现象七十二变</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>乡愁四韵</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>穿过你的黑发我的手</a></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><span>2009-4-29 02:16</span><a href=#>大兵歌</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>黄色面孔</a></li>
            <li><span>2009-4-29 02:16</span><a href=#>台北红玫瑰</a></li>
        </ul>
    </div>
</body>
</html>
